<template>
  <div class="gl_contentBox gl_heightFull">
    <div class="demo-input-suffix gl_searchBox">
      <el-row :gutter="20">
        <el-col :span="4">
          <p>考生姓名</p>
          <el-input v-model="qo.Filter" placeholder="请输入考生姓名" size="mini" clearable @change="getPageList()" />
        </el-col>
        <el-col :span="4">
          <p>证件号码</p>
          <el-input v-model="qo.IdCardNumber" placeholder="请输入证件号码" size="mini" clearable @change="getPageList()" />
        </el-col>
        <el-col :span="4">
          <p>缴纳类型</p>
          <el-select v-model="qo.MemberFeeTypeCode" size="mini" placeholder="请选择缴纳类型" filterable @change="getPageList()">
            <el-option label="全部" :value="null" />
            <el-option v-for="jtem in dict.memberFeeType" :key="jtem.code" :value="jtem.code" :label="jtem.value" />
          </el-select>
        </el-col>
        <el-col :span="4" class="search_btn">
          <el-button type="primary" size="mini" @click="getPageList()">筛选</el-button>
          <el-button type="warning" size="mini" @click="clickReset()">{{ $t('button.Reset') }}</el-button>
        </el-col>
      </el-row>
    </div>
    <el-row class="gl_my_15">
      <el-button type="primary" size="mini" @click="clickBatch">批量审核</el-button>
      <el-button type="primary" size="mini" :loading="btnLoading_info" @click="exportInfo">缴费信息导出</el-button>
      <el-button type="primary" size="mini" :loading="btnLoading_photo" @click="exportPhoto">照片导出</el-button>
      <!--<el-button type="primary" size="mini">会员编号导入</el-button> -->
      <div style="display:inline-block;width:80px;height:28px;margin-right:10px;margin-left:10px;">
        <el-upload
          :action="importAction"
          :http-request="upLoadFile"
          :before-upload="beforeUpload"
          :auto-upload="true"
          :show-file-list="false"
          accept=".xlsx, .xls"
        >
          <el-button :loading="btnLoading_no" type="primary" size="mini">会员编号导入</el-button>
        </el-upload>
      </div>
    </el-row>
    <el-table
      v-loading="tableLoading"
      :data="tableData"
      class="gl_table_noBorder gl_mt_15"
      size="mini"
      @selection-change="selection"
    >
      <el-table-column type="selection" />
      <el-table-column type="index" label="序号" align="center" width="50" />
      <el-table-column label="姓名" align="center" width="54">
        <template slot-scope="{row}">
          <PersonalImage :imgurl="row.avatarUrl" imgheight="60px" />
          <!-- <img class="roodsPhoto" :src="getStaticFileUrl(row.imageUrl)" alt=""> -->
        </template>
      </el-table-column>
      <el-table-column label="" prop="registerStudent.name" min-width="100" />
      <el-table-column label="证件号码" prop="idCardNumber" :min-width="145" />
      <el-table-column label="缴纳类型" prop="memberFeeType.name" :min-width="100" />
      <el-table-column label="会员号" prop="memberNumber" :min-width="120" />
      <el-table-column label="缴纳年限" prop="feeYear" :width="80" />
      <el-table-column label="机构" prop="organizationUnitName" :min-width="120" />
      <el-table-column label="金额" prop="amount" :min-width="100">
        <template slot-scope="{row}">
          {{ (row.amount === 0 || row.amount > 0) ? (row.amount / 100).toFixed(2) : '' }}
        </template>
      </el-table-column>
      <el-table-column label="到期时间" :min-width="90">
        <template slot-scope="{row}">
          <span v-if="row.exipiry">
            {{ row.exipiry | FormatDate('yyyy-MM-dd') }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="审核结果" prop="status.name" :min-width="90" />
      <el-table-column fixed="right" :label="$t('table.actions')" width="135">
        <template slot-scope="{ row }">
          <el-button size="mini" type="text" @click="clickReview(row.id, true)">通过</el-button>
          <el-button size="mini" type="text" @click="clickReview(row.id, false)">不通过</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="批量操作"
      :visible.sync="dialogVisible"
      width="420px"
      class="gl_dialog_TitleLine gl_dl_footer"
    >
      <el-form ref="form" class="gl_form_mini" size="mini" label-position="top" label-width="80px">
        <el-form-item label="操作结果">
          <el-select v-model="reviewQO.isApproved" size="mini" placeholder="请选择" style="width:100%">
            <el-option label="通过" :value="true" />
            <el-option label="不通过" :value="false" />
          </el-select>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="cancelDialog">取 消</el-button>
        <el-button type="primary" size="mini" :loading="batchLoading" @click="submitBatch">确 定</el-button>
      </div>
    </el-dialog>
    <el-row class="gl_pt_15" style="text-align: right;">
      <el-pagination
        :current-page="qo.Page"
        :page-size="qo.MaxResultCount"
        :total="total"
        layout="total,sizes,prev,pager,next,jumper"
        :page-sizes="[10, 20, 30, 40]"
        @size-change="sizeChange"
        @current-change="pageIndexChange"
      />
    </el-row>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import PersonalImage from '@/components/PersonalImage/index';
import { api_GET_DownLoadFileAddHeader, api_Post_UploadFileAddHeader } from '@/extend/api/file';
import { errorText } from '@/lib';
import {
  Api_GET_ClubFeeStudentQO, // 获取缴费学员列表
  BatchApproveFeeStudentInput // 批量审核缴费学员
} from '@/lib/form/hall/swaggerForm';
import {
  api_GET_ClubFeeStudent, // 获取缴费学员列表
  api_PUT_ClubFeeStudentIdApprove, // 审核指定缴费学员
  api_PUT_ClubFeeStudentBatchApprove // 批量审核缴费学员
} from '@/extend/api/hallswaggerApi/app';
export default {
  components: {
    PersonalImage
  },
  data() {
    return {
      qo: new Api_GET_ClubFeeStudentQO(),
      reviewQO: new BatchApproveFeeStudentInput(),
      tableLoading: false,
      total: 0,
      tableData: [],
      selectData: [],
      dialogVisible: false,
      batchLoading: false,
      FeeRequestId: '',
      importAction: `${WEB_CONFIG.VUE_APP_SWAGGER_HALL_BASE}/api/app/club/importMemberNumber`,
      btnLoading_info: false,
      btnLoading_photo: false,
      btnLoading_no: false,
      file: '',
      GetFeeStudentsInput: {}
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict
    })
  },
  created() {
    this.getDict();
    this.FeeRequestId = this.$route.query.id || '';
    this.getPageList();
  },
  methods: {
    // 若没有字典信息，外部可直接调用方法获取字典数据
    ...mapActions({ getDict: 'dict/getDict' }),
    getPageList(page) {
      this.qo.Page = page || 1;
      this.qo.SkipCount = (this.qo.Page - 1) * this.qo.MaxResultCount;
      this.qo.FeeRequestId = this.FeeRequestId;
      this.qo.IncludeMemberFeeType = true;
      this.qo.IncludeRegisterStudent = true;
      this.qo.IncludeStatus = true;
      this.qo.Sorting = 'creationTime DESC';
      this.tableLoading = true;
      api_GET_ClubFeeStudent(this.qo).then(res => {
        this.tableLoading = false;
        this.tableData = res.items;
        this.total = res.totalCount;
      }, error => {
        this.tableLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 审核指定缴费学员
    clickReview(id, code) {
      api_PUT_ClubFeeStudentIdApprove(id, { isApproved: code }).then(res => {
        this.$message({ type: 'success', message: '审核成功' });
        this.getPageList(this.qo.Page);
      }, error => {
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    clickReset() {
      this.qo = new Api_GET_ClubFeeStudentQO();
      this.getPageList();
    },
    // 批量审核
    clickBatch() {
      if (!this.selectData.length) {
        this.$message({
          type: 'warning',
          showClose: true,
          message: `请先勾选要审核的学员`
        });
        return;
      }
      this.dialogVisible = true;
    },
    submitBatch() {
      this.reviewQO.ids = this.selectData.map(item => item.id);
      this.batchLoading = true;
      api_PUT_ClubFeeStudentBatchApprove(this.reviewQO).then(res => {
        this.$message({ type: 'success', message: '审核成功' });
        this.batchLoading = false;
        this.cancelDialog();
        this.getPageList(this.qo.Page);
      }, error => {
        this.batchLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    cancelDialog() {
      this.reviewQO = new BatchApproveFeeStudentInput();
      this.dialogVisible = false;
    },
    // 缴费信息导出
    exportInfo() {
      const that = this;
      this.btnLoading_info = true;
      const tempUrl = `/api/excel`;
      const fileName = '缴费信息' + '.xlsx';
      this.GetFeeStudentsInput = {
        FeeRequestId: this.FeeRequestId,
        IncludeMemberFeeType: this.qo.IncludeMemberFeeType,
        IncludeRegisterStudent: this.qo.IncludeRegisterStudent,
        IncludeStatus: this.qo.IncludeStatus,
        Filter: this.qo.Filter,
        IdCardNumber: this.qo.IdCardNumber,
        MemberFeeTypeCode: this.qo.MemberFeeTypeCode,
        Sorting: 'creationTime DESC'
      };
      this.GetFeeStudentsInput = JSON.stringify(this.GetFeeStudentsInput);
      const baseUrl = WEB_CONFIG.VUE_APP_SWAGGER_HALL_BASE;
      api_GET_DownLoadFileAddHeader(tempUrl, fileName, { reportName: 'FeeStudent', GetFeeStudentsInput: this.GetFeeStudentsInput }, baseUrl).then(res => {
        this.btnLoading_info = false;
      }).catch(error => {
        that.btnLoading_info = false;
        errorText(error).then(function(text) {
          that.$message({ type: 'error', message: text });
        });
      });
    },
    // 照片导出
    exportPhoto() {
      const that = this;
      this.btnLoading_photo = true;
      const tempUrl = `/api/app/club/ExportFeeStudentHeadImage`;
      const fileName = '会员照片' + '.zip';
      const params = { feeRequestId: this.FeeRequestId };
      const baseUrl = WEB_CONFIG.VUE_APP_SWAGGER_HALL_BASE;
      api_GET_DownLoadFileAddHeader(tempUrl, fileName, params, baseUrl).then(res => {
        this.btnLoading_photo = false;
      }).catch(error => {
        that.btnLoading_photo = false;
        errorText(error).then(function(text) {
          that.$message({ type: 'error', message: text });
        });
      });
    },
    // 会员编号导入
    beforeUpload(file) {
      this.file = file;
    },
    upLoadFile() {
      this.btnLoading_no = true;
      api_Post_UploadFileAddHeader(this.importAction, this.file, { feeRequestId: this.FeeRequestId }).then(res => {
        this.btnLoading_no = false;
        this.$message({ type: 'success', message: '导入成功' });
        this.getPageList();
      }).catch(error => {
        this.btnLoading_no = false;
        this.$message({ type: 'error', message: '导入失败 ' + error.error || error.error.message });
      });
    },
    // 处理选中行
    selection(val) {
      this.selectData = val;
    },
    handleTimeChange(time) {
      this.qo.MinCreationTime = time ? time[0] : null;
      this.qo.MaxCreationTime = time ? time[1] : null;
      this.getPageList();
    },
    // 上传图片回显
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    // 分页
    sizeChange(MaxResultCount) {
      this.qo.MaxResultCount = MaxResultCount;
      this.getPageList();
    },
    pageIndexChange(currentPage) {
      this.selectData = [];
      this.getPageList(currentPage);
    }
  }
};
</script>
<style lang="scss" scoped>
  .roodsPhoto{
    width: 60px;
    height: 60px;
    border-radius: 6px;
    vertical-align: middle;
  }
</style>
